<template>
  <view class="goods_view">
    <text class="h2">店铺名称</text>
    <view class="goods_item">
      <view class="img_box">
        <image
          style="width: 100%; height: 100%"
          src="@/assets/test/a1.png"
          mode="aspectFill"
        />
      </view>
      <view class="goods_content">
        <view class="good_title"> 商品名称商品名称商品名称商品名称 </view>
        <view class="good_quantity">
          <text class="text">规格: 颜色尺寸</text>
          <text class="text">数量: 10</text>
        </view>
      </view>
      <view class="good_price">
        <Money style="--color: #333333; --size: 28rpx">39.9</Money>
      </view>
    </view>
  </view>
</template>

<script setup>
import Money from "@/component/Money.vue";
import {} from "vue";
</script>

<style lang="scss" scoped>
.goods_view {
  margin-bottom: 36rpx;
  .goods_item {
    display: flex;

    .goods_content {
      flex: 1 0 0;
      margin-right: 60rpx;
      .good_quantity {
        display: flex;
        flex-direction: column;
        .text {
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
          line-height: 30rpx;
        }
      }

      .good_title {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 36rpx;
        font-family: pfm;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2; //显示几行
        margin-bottom: 10rpx;
      }
    }
    .img_box {
      width: 130rpx;
      height: 130rpx;
      background-color: #eee;
      border-radius: 10px;
      margin-right: 30rpx;
      overflow: hidden;
    }
  }
  .h2 {
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    line-height: 28rpx;
    margin-bottom: 30rpx;
    display: inline-block;
  }
}
</style>
